<!-- TabBar 文章资讯 -->
<template>
	<view>
		
		
		<view class="my-tab-box">
			<my-tab ref="myTab" :list="tabList" @change="changeTab" :currentIndex="tabIndex" name="title"></my-tab>
		</view>
		
		<view class="my-tab-box" v-if="tabIndex==1">
			<scroll-view class="scroll-view" scroll-x="true">
			  <!-- 这里放置你的内容 -->
			  	<view style="background: #fff; width: 25%;padding:80rpx 0;float: left;margin-right: 20rpx;text-align: center;border-radius: 30rpx;
					margin-left: 20rpx;
				">
					全部
				</view>
				<view class="scroll-item" v-for="(item,index) in tabList2" :key="item.title" @tap="changeTab(index,item)">
					<view class="" v-if="item.image">
						<image :src="item.image" style="width: 100%" mode="widthFix"></image>
					</view>
				</view>
					
			</scroll-view>
		</view>
		
		<view style="padding: 30rpx;margin-bottom: 80rpx;">
			<!-- <u-swiper
			              :list="Links"
			              @change="e => current = e.current"
			              :autoplay="true"
						  :border-radius="30"
						  name="pic"
			      >
			</u-swiper> -->
			<view class="notice-item" @click="navTo('/pages/news/news')"  v-if="tabIndex==0">
				<text >
					公告
				</text>
			</view>
			
			<!-- 
			v-for="item in Links" :key="item.id" >
				<view
					class="content"
					@tap="navTo(`/pages/index/notice/detail?id=${item.id}`)"
				>
					<text class="title">{{ item.title }}</text>
					<view class="img-wrapper" v-if="item.logo">
						<image class="pic" :src="item.logo"></image>
					</view>
					<text class="introduce" v-if="item.desc">
						{{ item.desc }}
					</text>
					
					<text class="time">{{ item.createtime | time }}</text>
				</view>	
			</view> -->
			
			
			<view style="float: right;padding: 30rpx;">
				<text>当前积分：{{userinfo.score}}</text>
			</view>
			
		</view>
		

		<my-list ref="myList"
			:api="productList" :params="params" :transformRequestData="transformRequestData">>
			<template v-slot:card="{list}">
				<view class="product-list-wrapper">
					<rf-product-list :bottom="0" :list="list" :isList="false"
						:style="{paddingTop: 10 + 'rpx' }"></rf-product-list>
				</view>
			</template>
		</my-list>

		<view style="width: 1rpx;height: 150rpx;"></view>
	
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import eChart from '@/components/echart';
	import rfProductList from '@/components/rf-product-list2';
	export default {
		components: {
			eChart,
			rfProductList
			
		},
		data() {
			return {
				Links: [
					// require('@/static/mao/mm......00.png'),
					// require('@/static/mao/mm......0011.png'),
					// require('@/static/mao/2nn00.png'),
					// require('@/static/mao/msss.png'),
				],
				tabList: [
					{
						type:1,
						title:"当期同人"
					},
					{
						type:2,
						title:"往期累消"
					}
				],
				tabList2:[
					// {
					// 	id:0,
					// 	title:"全部",
						// image:require("@/static/mao/all.png")
					// }
				],
				
				tabIndex:0,
				userinfo:{
					score:0
				},
				currentIndex:0
			};
		},
		computed:{
			params(){
				return {
					tabId: this.tabList[this.tabIndex].type,
					limit:10
				};
			}
		},
		mounted() {
			this.init();
		},
		filters: {
			formatDate(value) {
				if (value == undefined) {
					return;
				}
				// let date = new Date(value * 1000);
				let date = new Date(value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				// return y + '-' + MM + '-' + d; //年月日	 + ' ' + h + ':' + m
				return y + '-' + MM + '-' + d; //年月日时分秒
			}
		},
		methods: {
			init(){
				let user = uni.getStorageSync('userInfo');
				if(!user){
					uni.showToast({ title:'请先登录', icon: 'none' });
					setTimeout(()=>{
						uni.navigateTo({
							url:`/pages/public/login`
						})
					},1000)
					return ;
				}
				this.userinfo = user;
				// let opts2 = {
				// 	url: 'api/notices/list',
				// 	method: 'get'
				// };
				// request.httpRequest(opts2).then((res)=>{
				// 	this.Links = res.data.data;
				// })
				let opts2 = {
					url:  'api/gashapons/guan',
					method: 'get'
				};
				request.httpRequest(opts2).then((res)=>{
					// this.tabList = res.data.data.data;
					res.data.data.data.forEach((item,i) => {
						this.tabList2.push({
							id:item.id,
							title:item.title,
							image:item.logo
						})
					})
				});
				
			},
			changeTab(e) {
				this.tabIndex = e.index;
				console.log(this.tabIndex);
			},
			transformRequestData(data) {
				
				// return data;
				return data.data.data.data;
			},
			productList(value) {
				
				let opts = {
					url:'api/gashapons/pro2',
					method: 'get'
				};
				const result =  request.httpTokenRequest(opts, value);
				return result;
							
				// let opts = {
				// 	url: 'api/blog/list?searchTypeId=' + type,
				// 	method: 'get'
				// };
				// uni.showLoading({
				// 	title: '加载中'
				// });
				// request.httpRequest(opts,value).then(res => {
				// 	// console.log(res);
				// 	uni.hideLoading();
				// 	if (res.statusCode == 200) {
				// 		this.newsList = res.data.data;
				// 		console.log(this.newsList);
				// 	} else {
				// 		console.log('数据请求错误～');
				// 	}
				// });
			},
			navTo(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #fff;
	}
	.borderBottom {
		border-bottom: 1px solid #f2f2f2;
	}
	
	.scroll-view {
		white-space: nowrap; /* 确保内容不换行 */
		width: 100%; /* 设置滚动视图的宽度 */
		height: 200rpx;
	}
	 
	.scroll-item {
	  display: inline-block; /* 内容项按行内块显示 */
	  width: 25%; /* 设置每个内容项的宽度 */
	  margin-right: 20rpx; /* 设置内边距 */
	  background-color: #fff; /* 设置背景色，便于区分项 */
	  text-align: center;
	  border-radius: 30rpx;
	
	}
	
	// 暂无数据
	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;
	
		image {
			width: 300rpx;
			border-radius: 50%;
			margin: 0 auto;
		}
	
		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}
		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
		}
	}
	.nav .cu-item.cur {
		font-weight: 600;
	}
	
	
	.notice-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1px solid #f2f2f2;
		height: 150rpx;
		border-radius: 30rpx;
		background: #fff;
		font-size:40rpx;
	}
	
	.time {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 80rpx;
		padding-top: 10rpx;
		font-size: 26rpx;
		color: #7d7d7d;
	}
	
	.content {
		width: 710rpx;
		padding: 0 24rpx;
		background-color: #fff;
		border-radius: 4rpx;
	}
	
	.title {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		font-size: 32rpx;
		color: #303133;
		flex-shrink: 0;
	}
	
	.img-wrapper {
		width: 100%;
		position: relative;
		
	}
	
	.pic {
		display: block;
		width: 100%;
		border-radius: 6rpx;
		height: 200rpx;
	}
	
	.cover {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		font-size: 36rpx;
		color: #fff;
	}
	
	.introduce {
		display: inline-block;
		padding: 16rpx 0;
		font-size: 28rpx;
		color: #606266;
		line-height: 38rpx;
	}
	
	.bot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		font-size: 24rpx;
		color: #707070;
		position: relative;
	}
	
	.more-icon {
		font-size: 32rpx;
	}
</style>
